<template>
  <tn-popup mode="center" v-model="isVipModalVisible" maskCloseable :customStyle="{borderRadius: '20rpx'}" backgroundColor="transparent">
    <view class="vip-modal" :class="{'is-member': userInfo.isVip}">
      <view class="vip-header">
        <view class="vip-title">{{ userInfo.isVip ? 'VIP会员特权' : '开通VIP会员' }}</view>
        <view class="vip-subtitle">{{ userInfo.isVip ? userInfo.vipExpireText || '会员专属福利与特权' : '尊享多重特权，提升社交体验' }}</view>
        <view class="vip-close" @tap="closeVipModal">
          <text class="tn-icon-close"></text>
        </view>
      </view>
      <view class="vip-content">
        <!-- 已开通会员状态下显示当前会员信息 -->
        <view class="vip-status" v-if="userInfo.isVip">
          <view class="vip-status-card">
            <view class="vip-icon">
              <text class="tn-icon-vip-diamond"></text>
            </view>
            <view class="vip-info">
              <view class="vip-level">{{ getCurrentVipLevel() }}</view>
              <view class="vip-expire">{{ userInfo.vipExpireText || '剩余30天' }}</view>
            </view>
          </view>
        </view>
        
        <scroll-view class="vip-benefits-scroll" scroll-y>
          <view class="vip-benefits">
            <!-- 修改为显示用户当前会员类型的特权 -->
            <view class="vip-benefits-title" v-if="userInfo.isVip">
              {{ getCurrentVipLevel() }}特权
            </view>
            <!-- 非会员状态时显示选择的会员类型特权 -->
            <view class="vip-benefits-title" v-else>
              {{ vipPlans[selectedPlan].name }}特权
            </view>
            
            <!-- 已开通会员时显示用户当前会员类型的特权 -->
            <template v-if="userInfo.isVip">
              <view v-for="(category, cIndex) in getUserVipBenefits()" :key="cIndex" class="benefit-category">
                <view class="category-title">{{ category.category }}</view>
                <view class="vip-benefit-item" v-for="(benefit, index) in category.items" :key="index">
                  <view class="vip-benefit-icon">
                    <text :class="'tn-icon-' + benefit.icon"></text>
                  </view>
                  <view class="vip-benefit-text">{{ benefit.text }}</view>
                </view>
              </view>
            </template>
            
            <!-- 未开通会员时显示选择的会员类型特权 -->
            <template v-else>
              <view v-for="(category, cIndex) in vipPlans[selectedPlan].benefits" :key="cIndex" class="benefit-category">
                <view class="category-title">{{ category.category }}</view>
                <view class="vip-benefit-item" v-for="(benefit, index) in category.items" :key="index">
                  <view class="vip-benefit-icon">
                    <text :class="'tn-icon-' + benefit.icon"></text>
                  </view>
                  <view class="vip-benefit-text">{{ benefit.text }}</view>
                </view>
              </view>
            </template>
          </view>
        </scroll-view>
        
        <!-- 未开通会员时显示购买选项 -->
        <block v-if="!userInfo.isVip">
          <view class="vip-plans">
            <view class="vip-plan" :class="{ 'selected': selectedPlan === 'monthly', 'recommended': defaultPlan === 'monthly' }" @tap="selectPlan('monthly')">
              <view class="vip-plan-name">{{ vipPlans.monthly.name }}</view>
              <view class="vip-plan-price">¥ {{ vipPlans.monthly.price }}</view>
              <view class="vip-plan-original">¥{{ vipPlans.monthly.original }}</view>
              <view class="recommend-tag" v-if="defaultPlan === 'monthly'">{{ defaultPlanLabel }}</view>
            </view>
            <view class="vip-plan" :class="{ 'selected': selectedPlan === 'quarterly', 'recommended': defaultPlan === 'quarterly' }" @tap="selectPlan('quarterly')">
              <view class="vip-plan-name">{{ vipPlans.quarterly.name }}</view>
              <view class="vip-plan-price">¥ {{ vipPlans.quarterly.price }}</view>
              <view class="vip-plan-original">¥{{ vipPlans.quarterly.original }}</view>
              <view class="recommend-tag" v-if="defaultPlan === 'quarterly'">{{ defaultPlanLabel }}</view>
            </view>
            <view class="vip-plan" :class="{ 'selected': selectedPlan === 'yearly', 'recommended': defaultPlan === 'yearly' }" @tap="selectPlan('yearly')">
              <view class="vip-plan-name">{{ vipPlans.yearly.name }}</view>
              <view class="vip-plan-price">¥ {{ vipPlans.yearly.price }}</view>
              <view class="vip-plan-original">¥{{ vipPlans.yearly.original }}</view>
              <view class="recommend-tag" v-if="defaultPlan === 'yearly'">{{ defaultPlanLabel }}</view>
            </view>
          </view>
          
          <view class="vip-btn-wrapper">
            <!-- 添加气泡提示 -->
            <view class="price-bubble">
              <view class="bubble-text">
                每天仅{{ getDailyPrice() }}元
                <view class="sparkle-wrapper">
                  <text class="sparkle-star">✨</text>
                </view>
              </view>
              <view class="bubble-arrow"></view>
            </view>
            <view class="vip-btn" @tap="purchaseVip">{{ getPlanText() }}</view>
          </view>
        </block>
        
        <!-- 已开通会员时显示的按钮组 -->
        <block v-else>
          <view class="vip-benefits-notice">
            <view class="notice-title">尊享会员特权中</view>
            <view class="notice-message">当前会员有效，享受全部特权</view>
          </view>
        </block>
      </view>
    </view>
  </tn-popup>
</template>

<script>
import api from '@/api/index.js';
import { mapState } from 'vuex';

export default {
  name: 'vip-popup',
  props: {
    // 控制弹窗显示
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isVipModalVisible: false,
      selectedPlan: 'quarterly', // 默认选择季度会员
      defaultPlan: 'quarterly', // 后端返回的默认计划
      isLoading: false, // 加载状态
      
      // 默认计划标签 - 将被后端数据替换
      defaultPlanLabel: '推荐',
      
      // 保存当前的openid
      currentOpenid: '',
      
      // 会员特权数据（默认数据，将被后端数据替换）
      vipPlans: {
        monthly: {
          name: '月度会员',
          price: 30,
          original: 39,
          days: 30,
          benefits: [
            { 
              category: '社交特权',
              items: [
                { icon: 'success', text: '昵称专属色彩，彰显尊贵身份' },
                { icon: 'success', text: '查看访客记录3天内记录' }
              ]
            },
            {
              category: '游戏特权',
              items: [
                { icon: 'success', text: '组队优先展示，提高接单率' }
              ]
            },
            {
              category: '资源特权',
              items: [
                { icon: 'success', text: '每日赠送30个金币' }
              ]
            }
          ]
        },
        quarterly: {
          name: '季度会员',
          price: 78,
          original: 117,
          days: 90,
          benefits: [
            { 
              category: '社交特权',
              items: [
                { icon: 'success', text: '昵称专属色彩，彰显尊贵身份' },
                { icon: 'success', text: '查看访客记录，开启更多互动' },
                { icon: 'success', text: '专属个人主页装饰框' }
              ]
            },
            {
              category: '游戏特权',
              items: [
                { icon: 'success', text: '组队优先展示，提高接单率' }
              ]
            },
            {
              category: '资源特权',
              items: [
                { icon: 'success', text: '每日赠送50个金币' }
              ]
            }
          ]
        },
        yearly: {
          name: '年度会员',
          price: 288,
          original: 468,
          days: 365,
          benefits: [
            { 
              category: '社交特权',
              items: [
                { icon: 'success', text: '昵称专属色彩，彰显尊贵身份' },
                { icon: 'success', text: '查看访客记录，开启更多互动' },
                { icon: 'success', text: '专属个人主页装饰框' },
                { icon: 'success', text: '专属个人资料标签' }
              ]
            },
            {
              category: '游戏特权',
              items: [
                { icon: 'success', text: '组队优先展示，提高接单率' },
                { icon: 'success', text: '游戏对战邀请置顶显示' }
              ]
            },
            {
              category: '资源特权',
              items: [
                { icon: 'success', text: '每日赠送100个金币' },
                { icon: 'success', text: '生日当天额外赠送200金币' }
              ]
            }
          ]
        }
      }
    }
  },
  computed: {
    // 从store获取用户信息
    ...mapState({
      // 用户信息
      storeUserInfo: state => state.user.userInfo
    }),
    
    // 转换用户信息，确保包含所需的字段
    userInfo() {
      return {
        // 从store获取用户信息
        ...this.storeUserInfo,
        // 设置用户会员状态
        isVip: this.storeUserInfo?.vip || false,
        // 确保有vipExpireText字段，如果没有则根据vipExpireTime计算
        vipExpireText: this.storeUserInfo?.vipExpireText || this.calculateVipExpireText(this.storeUserInfo?.vipExpireTime),
        // 确保有vipPlanId字段
        vipPlanId: this.storeUserInfo?.vipPlanId || '',
        // 确保有vipPlanName字段
        vipPlanName: this.storeUserInfo?.vipPlanName || ''
      }
    }
  },
  watch: {
    // 监听外部传入的show属性变化
    show(newVal) {
      this.isVipModalVisible = newVal;
      if (newVal) {
        this.loadVipConfig();
        
        // 每次显示时检查openid
        this.checkOpenid();
      }
    },
    // 监听内部状态变化，通知父组件
    isVipModalVisible(newVal) {
      this.$emit('update:show', newVal);
      if (!newVal) {
        this.$emit('close');
      }
    }
  },
  methods: {
    // 计算会员到期文本
    calculateVipExpireText(expireTime) {
      if (!expireTime) return '';
      
      const now = new Date().getTime();
      const expire = new Date(expireTime).getTime();
      const diffDays = Math.ceil((expire - now) / (1000 * 60 * 60 * 24));
      
      if (diffDays <= 0) return '已过期';
      return `剩余${diffDays}天`;
    },
    
    // 加载VIP配置信息
    async loadVipConfig() {
      try {
        this.isLoading = true;
        
        // 调用API获取VIP配置
        const res = await api.user.getVipConfig();
        
        // 修改这里：res已经是配置数据了，不需要检查res.data
        if (res && Object.keys(res).length > 0) {
          const configData = res;
          
          // 使用后端返回的数据更新本地配置
          if (configData.plans) {
            // 替换计划配置 - 价格、天数等
            Object.keys(configData.plans).forEach(key => {
              if (this.vipPlans[key]) {                
                this.vipPlans[key] = {
                  ...this.vipPlans[key],
                  ...configData.plans[key]
                };
              }
            });
          }
          
          // 更新福利内容
          if (configData.benefits) {              
            Object.keys(configData.benefits).forEach(planKey => {
              if (this.vipPlans[planKey]) {
                this.vipPlans[planKey].benefits = configData.benefits[planKey];
              }
            });
          }
          
          // 设置默认选择的会员套餐
          if (configData.defaultPlan && this.vipPlans[configData.defaultPlan]) {
            this.selectedPlan = configData.defaultPlan;
            this.defaultPlan = configData.defaultPlan;
          }
          
          // 设置默认套餐标签
          if (configData.defaultPlanLabel) {
            this.defaultPlanLabel = configData.defaultPlanLabel;
          }
        }
      } catch (error) {
        console.error('获取VIP配置失败', error);
        uni.showToast({
          title: '获取VIP配置失败',
          icon: 'none'
        });
      } finally {
        this.isLoading = false;
      }
    },
    
    // 关闭VIP会员弹窗
    closeVipModal() {
      this.isVipModalVisible = false;
    },
    
    // 选择会员方案
    selectPlan(plan) {
      this.selectedPlan = plan;
    },
    
    // 获取会员方案文本
    getPlanText() {
      return `立即开通${this.vipPlans[this.selectedPlan].name}(¥${this.vipPlans[this.selectedPlan].price})`;
    },
    
    // 获取当前会员等级名称
    getCurrentVipLevel() {
      // 修改为根据用户的vipPlanId获取会员等级名称
      if (this.userInfo.vipPlanId && this.vipPlans[this.userInfo.vipPlanId]) {
        return this.vipPlans[this.userInfo.vipPlanId].name;
      }
      // 如果找不到对应的会员计划，回退到从vipPlanName获取
      if (this.userInfo.vipPlanName) {
        return this.userInfo.vipPlanName;
      }
      // 最后兜底显示"会员"
      return '会员';
    },
    
    // 购买VIP会员
    purchaseVip() {
      // 先检查openid状态
      this.checkOpenid();
      
      // 这里应该调用支付接口
      const plan = this.vipPlans[this.selectedPlan];
      
      // 创建会员订单
      this.createVipOrder(plan);
    },
    
    // 创建会员订单
    async createVipOrder(plan) {
      try {
        // 构造订单数据
        const orderData = {
          planId: this.selectedPlan,
          planName: plan.name,
          price: plan.price,
          days: plan.days
        };
        
        // 调用创建订单API
        const orderRes = await api.user.createVipOrder(orderData);
        if (orderRes && orderRes.id) {
          // 订单创建成功，进行支付
          this.payVipOrder(orderRes);
        } else {
          uni.hideLoading();
          uni.showToast({
            title: '创建订单失败',
            icon: 'none'
          });
        }
      } catch (error) {
        uni.hideLoading();
        console.error('创建会员订单失败', error);
        uni.showToast({
          title: '创建订单失败，请稍后再试',
          icon: 'none'
        });
      }
    },
    
    // 支付会员订单
    async payVipOrder(orderInfo) {
      try {
        // 获取支付信息 - 使用payOrderId而不是会员订单ID
        const payInfoRes = await api.user.getVipOrderPayInfo(orderInfo.payOrderId);
        
        if (!payInfoRes) {
          throw new Error('获取支付信息失败');
        }
        
        // 支付前再次检查openid
        await this.$store.dispatch('user/getUserInfo');
        this.checkOpenid();
        
        // 提交支付
        const payData = {
          id: orderInfo.payOrderId,
          channelCode: this.getPayChannelCode(), // 根据不同平台选择支付渠道
          channelExtras: {} // 初始化channelExtras对象
        };

        // 微信支付需要添加openid参数
        if (payData.channelCode === 'wx_lite' || payData.channelCode === 'wx_pub' || payData.channelCode === 'wx_mp') {
          // 直接使用组件中保存的openid
          if (this.currentOpenid) {
            payData.channelExtras.openid = this.currentOpenid;
          } else {
            // 未找到openid，提示用户重新登录
            uni.hideLoading();
            console.error('组件中没有有效的openid，需要重新登录');
            uni.showModal({
              title: '支付提示',
              content: '支付需要授权信息，请退出后重新登录',
              showCancel: false,
              success: () => {
                // 可以跳转到登录页或其他处理
              }
            });
            return;
          }
        }
        
        const payRes = await api.user.submitVipOrderPay(payData);
        
        uni.hideLoading();
        
        // 兼容不同的返回结构
        if (payRes) {
          // 检查返回数据中是否有invokeResponse或displayContent
          if (payRes.invokeResponse || (payRes.displayContent && payRes.status === 0)) {
            // 调用支付
            this.invokePayment(payRes);
          } else {
            console.warn('支付接口返回数据不完整');
            uni.showToast({
              title: '发起支付失败',
              icon: 'none'
            });
          }
        } else {
          console.error('支付接口返回空数据');
          uni.showToast({
            title: '发起支付失败',
            icon: 'none'
          });
        }
      } catch (error) {
        uni.hideLoading();
        console.error('支付会员订单失败', error);
        uni.showToast({
          title: '支付失败，请稍后再试',
          icon: 'none'
        });
      }
    },
    
    // 调用平台支付
    invokePayment(payResult) {
      // 根据不同平台调用不同的支付方式
      // #ifdef APP-PLUS
      this.appPay(payResult);
      // #endif
      
      // #ifdef MP-WEIXIN
      this.weixinPay(payResult);
      // #endif
      
      // #ifdef H5
      this.h5Pay(payResult);
      // #endif
    },
    
    // 获取当前支付渠道编码
    getPayChannelCode() {
      // #ifdef APP-PLUS
      const platform = uni.getSystemInfoSync().platform;
      return platform === 'android' ? 'wx_app' : 'wx_lite';
      // #endif
      
      // #ifdef MP-WEIXIN
      return 'wx_lite';
      // #endif
      
      // #ifdef H5
      return 'wx_mp';
      // #endif
      
      // 默认使用微信小程序支付
      return 'wx_lite';
    },
    
    // APP支付
    appPay(payResult) {
      const platform = uni.getSystemInfoSync().platform;
      if (platform === 'android') {
        // 安卓APP微信支付
        uni.payWithWeixin({
          orderInfo: payResult.invokeResponse,
          success: (res) => {
            this.handlePaySuccess();
          },
          fail: (err) => {
            this.handlePayFail(err);
          }
        });
      } else {
        // iOS APP支付宝支付
        uni.payWithAlipay({
          orderInfo: payResult.invokeResponse,
          success: (res) => {
            this.handlePaySuccess();
          },
          fail: (err) => {
            this.handlePayFail(err);
          }
        });
      }
    },
    
    // 微信小程序支付
    weixinPay(payResult) {
      // 从不同来源获取支付参数
      let payParams;
      if (payResult.invokeResponse) {
        payParams = JSON.parse(payResult.invokeResponse);
      } else if (payResult.displayContent) {
        payParams = JSON.parse(payResult.displayContent);
      } else {
        console.error('无法获取支付参数');
        uni.showToast({
          title: '支付失败，参数错误',
          icon: 'none'
        });
        return;
      }
      
      // 处理参数名称差异：后端返回packageValue，但微信支付SDK需要package
      if (payParams.packageValue && !payParams.package) {
        payParams.package = payParams.packageValue;
        delete payParams.packageValue;
      }
      
      // 确保所有必要参数都存在
      const requiredParams = ['appId', 'timeStamp', 'nonceStr', 'package', 'signType', 'paySign'];
      const missingParams = requiredParams.filter(param => !payParams[param]);
      
      if (missingParams.length > 0) {
        console.error('支付参数缺失:', missingParams.join(', '));
        uni.showToast({
          title: '支付参数不完整',
          icon: 'none'
        });
        return;
      }
      
      uni.requestPayment({
        ...payParams,
        success: () => {
          this.handlePaySuccess();
        },
        fail: (err) => {
          this.handlePayFail(err);
        }
      });
    },
    
    // H5网页支付
    h5Pay(payResult) {
      // H5支付通常是跳转到支付页面
      window.location.href = payResult.invokeResponse;
    },
    
    // 处理支付成功
    handlePaySuccess() {
      uni.showToast({
        title: 'VIP开通成功',
        icon: 'success'
      });
      
      this.closeVipModal();
      
      // 通知父组件VIP购买成功
      this.$emit('purchase-success', {
        plan: this.selectedPlan,
        planData: this.vipPlans[this.selectedPlan]
      });
      
      // 刷新用户信息
      this.refreshUserInfo();
    },
    
    // 处理支付失败
    handlePayFail(err) {
      console.error('支付失败', err);
      uni.showToast({
        title: '支付取消或失败',
        icon: 'none'
      });
    },
    
    // 刷新用户信息
    refreshUserInfo() {
      // 通过Vuex刷新用户信息
      this.$store.dispatch('user/getUserInfo');
    },
    
    // 检查当前openid状态
    checkOpenid() {
      // 从本地存储获取
      try {
        const storedOpenid = uni.getStorageSync('openid');
        this.currentOpenid = storedOpenid || '';
      } catch (err) {
        console.error('获取存储的openid失败:', err);
        this.currentOpenid = '';
      }
      
      // 从用户信息获取
      try {
        const userInfo = this.$store.state.user.userInfo;
        if (userInfo && userInfo.openid) {
          if (!this.currentOpenid) {
            this.currentOpenid = userInfo.openid;
            // 保存到本地存储
            uni.setStorageSync('openid', userInfo.openid);
          }
        }
      } catch (err) {
        console.error('获取用户信息中的openid失败:', err);
      }
      
      // 如果最终没有找到openid
      if (!this.currentOpenid) {
        console.warn('没有找到有效的openid，可能会影响支付功能');
      }
    },
    
    // 获取每日价格
    getDailyPrice() {
      const plan = this.vipPlans[this.selectedPlan];
      // 计算每日价格，取值后加0.01，让显示更具有吸引力
      const dailyPrice = (plan.price / plan.days + 0.01).toFixed(1);
      return dailyPrice;
    },
    
    // 获取用户当前会员特权
    getUserVipBenefits() {
      if (this.userInfo.vipPlanId && this.vipPlans[this.userInfo.vipPlanId] && this.vipPlans[this.userInfo.vipPlanId].benefits) {
        return this.vipPlans[this.userInfo.vipPlanId].benefits;
      }
      // 如果找不到对应的会员计划特权，返回季度会员特权（作为默认值）
      return this.vipPlans.quarterly.benefits;
    },
    
    // 获取当前方案键名
    getCurrentPlanKey() {
      // 修改为返回用户的vipPlanId
      return this.userInfo.vipPlanId || 'quarterly';
    }
  }
}
</script>

<style lang="scss" scoped>
.vip-modal {
  width: 600rpx;
  background: linear-gradient(145deg, #050505, #0a0a0a);
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.5);
  position: relative;
  animation: modal-enter 0.3s ease;
  
  // 添加霓虹灯边框效果
  &::before {
    content: '';
    position: absolute;
    top: -2rpx;
    left: -2rpx;
    right: -2rpx;
    bottom: -2rpx;
    background: linear-gradient(135deg, #B3F73C, transparent, #B3F73C, transparent);
    background-size: 400% 400%;
    animation: neon-border 3s ease infinite;
    border-radius: 22rpx;
    z-index: 0;
    opacity: 0.5;
  }
  
  // 已开通会员状态下的特殊样式
  &.is-member {
    background: linear-gradient(145deg, #0a0a0a, #111111);
    
    &::before {
      background: linear-gradient(135deg, rgba(179, 247, 60, 0.7), rgba(142, 172, 33, 0.4), rgba(179, 247, 60, 0.7), rgba(142, 172, 33, 0.4));
      opacity: 0.6;
      animation: neon-border 3s ease infinite;
    }
    
    &::after {
      border: 1rpx solid rgba(179, 247, 60, 0.3);
    }
    
    .vip-header {
      background: linear-gradient(135deg, #1a1a1a, #222222);
      position: relative;
      overflow: hidden;
      
      // 添加霓虹边缘效果
      &::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 3rpx;
        background: linear-gradient(90deg, transparent, #B3F73C, transparent);
        opacity: 0.8;
      }
      
      .vip-title {
        color: #B3F73C;
        text-shadow: 0 0 10rpx rgba(179, 247, 60, 0.5);
      }
      
      .vip-subtitle {
        color: rgba(220, 220, 220, 0.8);
      }
      
      // 替换闪光效果为更微妙的效果
      &::before {
        background: linear-gradient(
          to right,
          rgba(179, 247, 60, 0) 20%,
          rgba(179, 247, 60, 0.1) 40%,
          rgba(179, 247, 60, 0) 60%
        );
        animation: vip-shine 5s infinite linear;
      }
    }
    
    // 会员状态卡片样式优化
    .vip-status {
      .vip-status-card {
        background: linear-gradient(135deg, rgba(10, 10, 10, 0.8), rgba(30, 30, 30, 0.9));
        border: 1px solid rgba(179, 247, 60, 0.3);
        box-shadow: 0 0 15rpx rgba(0, 0, 0, 0.4), inset 0 0 10rpx rgba(179, 247, 60, 0.1);
        
        .vip-icon {
          background: linear-gradient(135deg, #8eac21, #B3F73C);
          border: 1px solid #B3F73C;
          
          .tn-icon-vip-diamond {
            color: #B3F73C;
            text-shadow: 0 0 8rpx rgba(179, 247, 60, 0.8);
          }
        }
      }
    }
    
    // 特权内容部分优化
    .vip-benefits {
      .vip-benefits-title {
        color: #B3F73C;
        text-shadow: 0 0 8rpx rgba(179, 247, 60, 0.4);
      }
      
      .vip-benefit-icon {
        background-color: rgba(179, 247, 60, 0.2);
        border: 1px solid rgba(179, 247, 60, 0.4);
        
        .tn-icon-success {
          color: #B3F73C;
          text-shadow: 0 0 4rpx rgba(179, 247, 60, 0.6);
        }
      }
    }
  }
  
  // 修改边框样式，确保圆角边缘没有白边
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 20rpx;
    border: 1rpx solid rgba(179, 247, 60, 0.2); 
    pointer-events: none;
    z-index: 1;
  }
  
  .vip-header {
    padding: 30rpx;
    position: relative;
    background: linear-gradient(135deg, #8eac21, #B3F73C);
    overflow: hidden; // 为光效做准备
    
    // 添加闪光效果
    &::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 20%,
        rgba(255, 255, 255, 0.3) 40%,
        rgba(255, 255, 255, 0) 60%
      );
      transform: rotate(45deg);
      animation: vip-shine 4s infinite linear;
    }
    
    .vip-title {
      font-size: 38rpx;
      font-weight: bold;
      color: #020303;
      text-shadow: 0 2rpx 4rpx rgba(255, 255, 255, 0.2);
      position: relative; // 确保文字在闪光效果上方
    }
    
    .vip-subtitle {
      font-size: 26rpx;
      color: rgba(2, 3, 3, 0.8);
      margin-top: 10rpx;
      position: relative; // 确保文字在闪光效果上方
    }
    
    .vip-close {
      position: absolute;
      top: 20rpx;
      right: 20rpx;
      width: 50rpx;
      height: 50rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(2, 3, 3, 0.7);
      z-index: 1; // 确保按钮在闪光效果上方
      
      .tn-icon-close {
        font-size: 30rpx;
      }
    }
  }
  
  .vip-content {
    padding: 30rpx;
    
    // 会员状态卡片样式
    .vip-status {
      margin-bottom: 30rpx;
      
      .vip-status-card {
        display: flex;
        align-items: center;
        background: linear-gradient(135deg, rgba(179, 247, 60, 0.2), rgba(20, 20, 20, 0.6));
        border-radius: 16rpx;
        padding: 20rpx;
        border: 1px solid rgba(179, 247, 60, 0.4);
        box-shadow: 0 0 15rpx rgba(179, 247, 60, 0.2);
        
        .vip-icon {
          width: 60rpx;
          height: 60rpx;
          border-radius: 50%;
          background: linear-gradient(135deg, #8eac21, #B3F73C);
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 20rpx;
          box-shadow: 0 0 10rpx rgba(179, 247, 60, 0.4);
          animation: pulse-icon 2s infinite;
          
          .tn-icon-vip-diamond {
            font-size: 30rpx;
            color: #020303;
          }
        }
        
        .vip-info {
          flex: 1;
          
          .vip-level {
            font-size: 30rpx;
            font-weight: bold;
            color: #B3F73C;
            margin-bottom: 6rpx;
            text-shadow: 0 0 6rpx rgba(179, 247, 60, 0.3);
          }
          
          .vip-expire {
            font-size: 24rpx;
            color: #e0e0e0;
          }
        }
      }
    }
    
    .vip-benefits-scroll {
      max-height: 260rpx;
      margin-bottom: 30rpx;
    }
    
    .vip-benefits {
      margin-bottom: 20rpx;
      
      .vip-benefits-title {
        font-size: 28rpx;
        color: #B3F73C;
        font-weight: bold;
        margin-bottom: 20rpx;
        text-align: center;
        position: relative;
        
        &::after {
          content: '';
          position: absolute;
          bottom: -10rpx;
          left: 50%;
          transform: translateX(-50%);
          width: 60rpx;
          height: 4rpx;
          background: linear-gradient(90deg, rgba(179, 247, 60, 0), rgba(179, 247, 60, 0.8), rgba(179, 247, 60, 0));
        }
      }
      
      .benefit-category {
        margin-bottom: 20rpx;
        
        .category-title {
          font-size: 24rpx;
          color: #999;
          margin-bottom: 14rpx;
          padding-left: 10rpx;
          position: relative;
          
          &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 4rpx;
            height: 20rpx;
            background-color: #B3F73C;
            border-radius: 2rpx;
          }
        }
      }
      
      .vip-benefit-item {
        display: flex;
        align-items: center;
        margin-bottom: 16rpx;
        
        .vip-benefit-icon {
          width: 32rpx;
          height: 32rpx;
          border-radius: 50%;
          background-color: #B3F73C;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 16rpx;
          
          .tn-icon-success {
            font-size: 20rpx;
            color: #020303;
          }
        }
        
        .vip-benefit-text {
          font-size: 24rpx;
          color: #e0e0e0;
        }
      }
    }
    
    .vip-plans {
      display: flex;
      justify-content: space-between;
      margin-bottom: 40rpx;
      
      .vip-plan {
        flex: 1;
        padding: 20rpx;
        border-radius: 10rpx;
        background-color: rgba(255, 255, 255, 0.05);
        margin: 0 10rpx;
        transition: all 0.3s;
        border: 1rpx solid transparent;
        position: relative;
        
        &.selected {
          background-color: rgba(179, 247, 60, 0.15);
          border: 1rpx solid #B3F73C;
          box-shadow: 0 0 15rpx rgba(179, 247, 60, 0.3);
          transform: translateY(-5rpx) scale(1.05);
          
          // 添加选中标记
          &::after {
            content: '';
            position: absolute;
            bottom: -10rpx;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 10rpx solid transparent;
            border-right: 10rpx solid transparent;
            border-top: 10rpx solid rgba(179, 247, 60, 0.6);
          }
          
          .vip-plan-price {
            font-size: 38rpx !important;
            animation: price-pulse 1.5s infinite;
          }
        }
        
        &.recommended {
          position: relative;
        }
        
        .vip-plan-name {
          font-size: 26rpx;
          color: #e0e0e0;
          text-align: center;
          margin-bottom: 10rpx;
        }
        
        .vip-plan-price {
          font-size: 34rpx;
          font-weight: bold;
          color: #B3F73C;
          text-align: center;
        }
        
        .vip-plan-original {
          font-size: 22rpx;
          color: #999;
          text-decoration: line-through;
          text-align: center;
        }
        
        // 添加推荐标签样式
        .recommend-tag {
          position: absolute;
          top: -10rpx;
          right: -10rpx;
          background: linear-gradient(135deg, #8eac21, #B3F73C);
          color: #020303;
          font-size: 20rpx;
          padding: 4rpx 10rpx;
          border-radius: 10rpx;
          box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.2);
          animation: recommend-pulse 2s infinite;
          z-index: 1;
        }
      }
    }
    
    .vip-btn-wrapper {
      position: relative;
      width: 100%;
      margin-top: 10rpx;
      
      .price-bubble {
        position: absolute;
        top: -30rpx;
        right: 10rpx;
        transform: translateX(0);
        z-index: 5;
        animation: bubble-float 2s ease-in-out infinite;
        
        .bubble-text {
          background: rgba(12, 12, 12, 0.85);
          color: #B3F73C;
          font-weight: bold;
          padding: 4rpx 12rpx;
          border-radius: 20rpx;
          font-size: 20rpx;
          white-space: nowrap;
          box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.4), inset 0 0 8rpx rgba(179, 247, 60, 0.2);
          animation: pulse-glow 2s ease-in-out infinite;
          position: relative;
          border: 1px solid rgba(179, 247, 60, 0.3);
          
          .sparkle-wrapper {
            position: absolute;
            top: -6rpx;
            right: -4rpx;
            
            .sparkle-star {
              display: inline-block;
              font-size: 20rpx;
              transform-origin: center;
              animation: sparkle-rotate 2s linear infinite;
              color: #fff;
              text-shadow: 0 0 4rpx rgba(255, 255, 255, 0.8);
            }
          }
        }
        
        .bubble-arrow {
          width: 0;
          height: 0;
          border-left: 8rpx solid transparent;
          border-right: 8rpx solid transparent;
          border-top: 8rpx solid rgba(12, 12, 12, 0.85);
          position: absolute;
          bottom: -8rpx;
          right: 20rpx;
          left: auto;
          transform: translateX(0);
        }
      }
      
      .vip-btn {
        height: 80rpx;
        background: linear-gradient(135deg, #8eac21, #B3F73C);
        border-radius: 40rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #020303;
        font-size: 30rpx;
        font-weight: 600;
        box-shadow: 0 5rpx 15rpx rgba(179, 247, 60, 0.4);
        transition: all 0.3s;
        position: relative;
        overflow: hidden;
        width: 100%;
        
        // 添加光效
        &::before {
          content: '';
          position: absolute;
          top: -50%;
          left: -50%;
          width: 200%;
          height: 200%;
          background: linear-gradient(
            to right,
            rgba(255, 255, 255, 0) 20%,
            rgba(255, 255, 255, 0.3) 40%,
            rgba(255, 255, 255, 0) 60%
          );
          transform: rotate(45deg);
          animation: btn-shine 3s infinite linear;
        }
        
        &:active {
          transform: translateY(2rpx);
          box-shadow: 0 2rpx 8rpx rgba(179, 247, 60, 0.3);
          background: linear-gradient(135deg, #8eac21, #8eac21);
        }
        
        // 已开通会员时的按钮样式
        &.member-btn {
          background: linear-gradient(135deg, #151515, #252525);
          border: 1px solid #B3F73C;
          color: #B3F73C;
          font-weight: bold;
          box-shadow: 0 0 15rpx rgba(179, 247, 60, 0.2);
          cursor: pointer;
          
          &::before {
            background: linear-gradient(
              to right,
              rgba(179, 247, 60, 0) 10%,
              rgba(179, 247, 60, 0.1) 40%,
              rgba(179, 247, 60, 0) 60%
            );
          }
          
          &:hover {
            box-shadow: 0 0 20rpx rgba(179, 247, 60, 0.4);
          }
          
          &:active {
            background: linear-gradient(135deg, #111111, #222222);
            transform: translateY(2rpx);
          }
        }
      }
    }
    
    // 会员特权提示样式
    .vip-benefits-notice {
      background: rgba(25, 25, 25, 0.7);
      border-radius: 16rpx;
      padding: 20rpx;
      text-align: center;
      margin-top: 20rpx;
      border: 1px solid rgba(179, 247, 60, 0.3);
      
      .notice-title {
        font-size: 32rpx;
        color: #B3F73C;
        font-weight: bold;
        margin-bottom: 10rpx;
      }
      
      .notice-message {
        font-size: 26rpx;
        color: rgba(220, 220, 220, 0.8);
      }
    }
  }
}

@keyframes modal-enter {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes neon-border {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes vip-shine {
  0% {
    transform: rotate(45deg) translateX(-100%);
  }
  100% {
    transform: rotate(45deg) translateX(100%);
  }
}

@keyframes price-pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes recommend-pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes btn-shine {
  0% {
    transform: rotate(45deg) translateX(-100%);
  }
  100% {
    transform: rotate(45deg) translateX(100%);
  }
}

@keyframes ripple {
  0% {
    opacity: 1;
    transform: scale(0, 0) translate(-50%, -50%);
  }
  100% {
    opacity: 0;
    transform: scale(200, 200) translate(-50%, -50%);
  }
}

@keyframes bubble-float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6rpx);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes sparkle-rotate {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 0.7;
  }
  25% {
    transform: scale(1.2) rotate(90deg);
    opacity: 1;
  }
  50% {
    transform: scale(1) rotate(180deg);
    opacity: 0.7;
  }
  75% {
    transform: scale(1.2) rotate(270deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(360deg);
    opacity: 0.7;
  }
}

@keyframes pulse-glow {
  0% {
    box-shadow: 0 0 5rpx rgba(179, 247, 60, 0.3), inset 0 0 8rpx rgba(179, 247, 60, 0.2);
  }
  50% {
    box-shadow: 0 0 15rpx rgba(179, 247, 60, 0.5), inset 0 0 12rpx rgba(179, 247, 60, 0.4);
  }
  100% {
    box-shadow: 0 0 5rpx rgba(179, 247, 60, 0.3), inset 0 0 8rpx rgba(179, 247, 60, 0.2);
  }
}
</style> 